<template>
    <view class="components">
        <view class="content">
            <view
                style="z-index: 999"
                :class="item.id == screenIndex ? 'inTitle' : 'title'"
                v-for="(item, index) in screenList"
                :key="index"
                @click.stop="checkChange(item)"
                v-show="!searchStatus"
            >
                {{ item.title }}
                <img v-if="ttem.img || item.inImg" :src="item.id == screenIndex ? item.inImg : item.img"  style="width: 24rpx; height: 24rpx" />
                <img v-if="item.id == screenIndex" class="icon" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/inBelow_icon.png" height="7" width="15"/>
                <img v-else class="icon" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/below_icon.png" height="7" width="15"/>
            </view>
            <view class="search" @click="navSearch">
                <img style="width: 44rpx; height: 44rpx" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/search_icon.png"/>
            </view>
        </view>
        <uni-popup ref="sortRef" type="top" @change="popupChange">
            <view class="popup_view" :style="{'padding-top': `${barHeight + statusBarHeight + 50}px`}">
                <view v-if="screenIndex == 1" class="sort_content">
                    <view class="sort_row" v-for="(item, index) in sortList" :key="index" @click="onSort(item)">
                        <view :style="{'color' : sortValue.id == item.id ? '#5162FD' : '#494949'}" class="sort_title">{{ item.label }}</view>
                        <img class="zxyz_min_icon" :src="sortValue.id == item.id ? item.inImg : item.img"  />
                    </view>
                </view>
                <view v-else-if="screenIndex == 2" class="table_main" :style="{'height': `${noBarHeight - 44}px`}">
                    <scroll-view scroll-y="true" enhanced :show-scrollbar="false" :scroll-into-view="`item${industryOneId}`" scroll-with-animation="true" class="list_one">
                        <view :class="industryOneId == item.id? 'inList_row_one' : 'list_row_one'" :id="`item${item.id}`" v-for="(item, index) in industryOneData" :key="index" @click="onSelect(item, 'industryOne')">
                            {{ item.cat_name }}
                        </view>
                    </scroll-view>
                    <scroll-view scroll-y="true" enhanced :show-scrollbar="false" :scroll-into-view="`item${industryTwoId}`" scroll-with-animation="true" class="list_two">
                        <view v-show="industryOneId" :class="industryTwoId == 1 ? 'inList_row_two' : 'list_row_two'" @click="confirmFather(industryOneData.filter(res => res.id == industryOneId)[0])">
                            {{ industryOneData.filter(res => res.id == industryOneId)[0].cat_name }}
                        </view>
                        <view :class="industryTwoId == item.id? 'inList_row_two' : 'list_row_two'" :id="`item${item.id}`" v-for="(item, index) in industryTwoData" :key="index" @click="onSelect(item, 'industryTwo')">
                            {{ item.cat_name }}
                        </view>
                    </scroll-view>
                    <scroll-view scroll-y="true" enhanced :show-scrollbar="false" :scroll-into-view="`item${areaId}`" scroll-with-animation="true" class="list_three">
                        <view v-show="industryTwoId" :class="industryTwoId == 1 ? 'inList_row_three' : 'list_row_three'" @click="confirmFather(industryTwoData.filter(res => res.id == industryTwoId)[0])">
                            {{ industryTwoData.filter(res => res.id == industryTwoId)[0].cat_name }}
                        </view>
                        <view :class="industryThreeId == item.id? 'inList_row_three' : 'list_row_three'" :id="`item${item.id}`" v-for="(item, index) in industryThreeData" :key="index" @click="onSelect(item, 'industryThree')">
                            {{ item.cat_name }}
                        </view>
                    </scroll-view>
                </view>
                <view v-else-if="screenIndex == 3" class="table_main" :style="{'height': `${noBarHeight - 44}px`}">
                    <scroll-view scroll-y="true" enhanced :show-scrollbar="false" :scroll-into-view="`item${provinceId}`" scroll-with-animation="true" class="list_one">
                        <view :class="provinceId == item.id? 'inList_row_one' : 'list_row_one'" :id="`item${item.id}`" v-for="(item, index) in provinceData" :key="index" @click="onSelect(item, 'province')">
                            {{ item.city_name }}
                        </view>
                    </scroll-view>
                    <scroll-view scroll-y="true" enhanced :show-scrollbar="false" :scroll-into-view="`item${cityId}`" scroll-with-animation="true" class="list_two">
                        <view v-show="provinceId" :class="provinceId == 1 ? 'inList_row_two' : 'list_row_two'" @click="confirmFather(provinceData.filter(res => res.id == provinceId)[0])">
                            {{ provinceData.filter(res => res.id == provinceId)[0].city_name }}
                        </view>
                        <view :class="cityId == item.id? 'inList_row_two' : 'list_row_two'" :id="`item${item.id}`" v-for="(item, index) in cityData" :key="index" @click="onSelect(item, 'city')">
                            {{ item.city_name }}
                        </view>
                    </scroll-view>
                    <scroll-view scroll-y="true" enhanced :show-scrollbar="false" :scroll-into-view="`item${areaId}`" scroll-with-animation="true" class="list_three">
                        <view v-show="cityId" :class="cityId == 1 ? 'inList_row_three' : 'list_row_three'" @click="confirmFather(cityData.filter(res => res.id == cityId)[0])">
                            {{ cityData.filter(res => res.id == cityId)[0].city_name }}
                        </view>
                        <view :class="areaId == item.id? 'inList_row_three' : 'list_row_three'" :id="`item${item.id}`" v-for="(item, index) in areaData" :key="index" @click="onSelect(item, 'area')">
                            {{ item.city_name }}
                        </view>
                    </scroll-view>
                </view>
                <view v-else-if="screenIndex == 4" class="other_content"  :style="{'height': `${noBarHeight - 44}px`}">
                    <view class="other_black">
                        <view class="other_header">
                            <view class="header_name">地位</view>
                            <view v-if="screenForm.hydw && screenForm.hydw.length > 6" class="header_icon" @click.stop="checkStatue('roleStatue')">
                                {{!roleStatue ? '展开' : '收起'}}
                                <img class="zxyz_min_icon" :src="`https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/${!roleStatue ? 'bottom' : 'top'}_icon.png`"/>
                            </view>
                        </view>
                        <view class="other_main" :style="{height: `${roleStatue ? '' : '180rpx'}`}">
                            <view
                                @click="onScreen('tag', item)"
                                v-for="(item, index) in screenForm.hydw"
                                :key="index"
                                :class="searchForm.tag.findIndex( res => res.id == item.id) >= 0 ? 'inOther_li' : 'other_li'">{{ item.name || item.cat_name || '' }}</view>
                        </view>
                        <view class="other_header">
                            <view class="header_name">上市板块</view>
                            <view v-if="screenForm.market && screenForm.market.length > 6" class="header_icon" @click.stop="checkStatue('sectorStatue')">
                                {{!sectorStatue ? '展开' : '收起'}}
                                <img class="zxyz_min_icon" :src="`https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/${!sectorStatue ? 'bottom' : 'top'}_icon.png`"/>
                            </view>
                        </view>
                        <view class="other_main" :style="{height: `${sectorStatue ? '' : '180rpx'}`}">
                            <view
                                @click="onScreen('market', item)"
                                v-for="(item, index) in screenForm.market"
                                :key="index"
                                :class="searchForm.market.findIndex( res => res.id == item.id) >= 0 ? 'inOther_li' : 'other_li'">{{ item.name || item.cat_name || '' }}</view>
                        </view>
                        <view class="other_header">
                            <view class="header_name">企业性质</view>
                            <view v-if="screenForm.nature && screenForm.nature.length > 6" class="header_icon" @click.stop="checkStatue('natureStatue')">
                                {{!natureStatue ? '展开' : '收起'}}
                                <img class="zxyz_min_icon" :src="`https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/${!natureStatue ? 'bottom' : 'top'}_icon.png`"/>
                            </view>
                        </view>
                        <view class="other_main" :style="{height: `${natureStatue ? '' : '180rpx'}`}">
                            <view
                                @click="onScreen('nature', item)"
                                v-for="(item, index) in screenForm.nature"
                                :key="index"
                                :class="searchForm.nature.findIndex( res => res.id == item.id) >= 0 ? 'inOther_li' : 'other_li'">{{ item.name || item.cat_name || '' }}</view>
                        </view>
                        <view class="other_header">
                            <view class="header_name">收入规模</view>
                            <view v-if="screenForm.scale && screenForm.scale.length > 6" class="header_icon" @click.stop="checkStatue('incomeStatue')">
                                {{!incomeStatue ? '展开' : '收起'}}
                                <img class="zxyz_min_icon" :src="`https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/${!incomeStatue ? 'bottom' : 'top'}_icon.png`"/>
                            </view>
                        </view>
                        <view class="other_main" :style="{height: `${incomeStatue ? '' : '180rpx'}`}">
                            <view
                                @click="onScreen('scale', item)"
                                v-for="(item, index) in screenForm.scale"
                                :key="index"
                                :class="searchForm.scale.findIndex( res => res.id == item.id) >= 0 ? 'inOther_li' : 'other_li'">{{ item.name || item.cat_name || '' }}</view>
                        </view>
                        <view class="other_header">
                            <view class="header_name">企业人数</view>
                            <view v-if="screenForm.amount && screenForm.amount.length > 6" class="header_icon" @click.stop="checkStatue('employeesStatue')">
                                {{!employeesStatue ? '展开' : '收起'}}
                                <img class="zxyz_min_icon" :src="`https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/${!employeesStatue ? 'bottom' : 'top'}_icon.png`"/>
                            </view>
                        </view>
                        <view class="other_main" :style="{height: `${employeesStatue ? '' : '180rpx'}`}">
                            <view
                                @click="onScreen('crew', item)"
                                v-for="(item, index) in screenForm.amount"
                                :key="index"
                                :class="searchForm.crew.findIndex( res => res.id == item.id) >= 0 ? 'inOther_li' : 'other_li'">{{ item.name || item.cat_name || '' }}</view>
                        </view>
                        <view class="other_header">
                            <view class="header_name">注册资本</view>
                            <view v-if="screenForm.capital && screenForm.capital.length > 6" class="header_icon" @click.stop="checkStatue('capitalStatue')">
                                {{!capitalStatue ? '展开' : '收起'}}
                                <img class="zxyz_min_icon" :src="`https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/${!capitalStatue ? 'bottom' : 'top'}_icon.png`"/>
                            </view>
                        </view>
                        <view class="other_main" :style="{height: `${capitalStatue ? '' : '180rpx'}`}">
                            <view
                                @click="onScreen('registeredcapital', item)"
                                v-for="(item, index) in screenForm.capital"
                                :key="index"
                                :class="searchForm.registeredcapital.findIndex( res => res.id == item.id) >= 0 ? 'inOther_li' : 'other_li'">{{ item.name || item.cat_name || '' }}</view>
                        </view>
                        <view class="other_header">
                            <view class="header_name">成立时间</view>
                            <view v-if="screenForm.establish && screenForm.establish.length > 6" class="header_icon" @click.stop="checkStatue('dateStatus')">
                                {{!dateStatus ? '展开' : '收起'}}
                                <img class="zxyz_min_icon" :src="`https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/${!dateStatus ? 'bottom' : 'top'}_icon.png`"/>
                            </view>
                        </view>
                        <view class="other_main" :style="{height: `${dateStatus ? '' : '180rpx'}`}">
                            <view
                                @click="onScreen('registerdate', item)"
                                v-for="(item, index) in screenForm.establish"
                                :key="index"
                                :class="searchForm.registerdate.findIndex( res => res.id == item.id) >= 0 ? 'inOther_li' : 'other_li'">{{ item.name || item.cat_name || '' }}</view>
                        </view>
                        <view class="other_header">
                            <view class="header_name">对外投资</view>
                            <view v-if="screenForm.foreign && screenForm.foreign.length > 6" class="header_icon" @click.stop="checkStatue('overseasStatue')">
                                {{!overseasStatue ? '展开' : '收起'}}
                                <img class="zxyz_min_icon" :src="`https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/${!overseasStatue ? 'bottom' : 'top'}_icon.png`"/>
                            </view>
                        </view>
                        <view class="other_main" :style="{height: `${overseasStatue ? '' : '180rpx'}`}">
                            <view
                                @click="onScreen('abroad', item)"
                                v-for="(item, index) in screenForm.foreign"
                                :key="index"
                                :class="searchForm.abroad.findIndex( res => res.id == item.id) >= 0 ? 'inOther_li' : 'other_li'"
                            >
                                {{ item.name || item.cat_name || '' }}
                            </view>
                        </view>
                    </view>
                    <view class="other_tool">
                        <view class="tool_cancel" @click="onResetting">重置</view>
                        <view class="tool_confirm" @click="onConfirm">完成</view>
                    </view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>
<script>
import {guild, mobregion, sxText, xzguild} from "@/utils/api/common";

var app = getApp()
export default ({
    name: "resetPassword",
    props: {
        screenIndex: {
            type: Number,
            default: 1
        },
        screenList: {
            type: Array,
            default: []
        },
        unread: {
            type: Array,
            default: []
        },
        sortValue: {
            type: Object,
            default: {}
        },
        industryValue: {
            type: Object,
            default: {}
        },
        provinceValue: {
            type: Object,
            default: {}
        },
        otherForm: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            barHeight: app.globalData.barHeight|| 40,
            statusBarHeight: app.globalData.statusBarHeight,
            noBarHeight: app.globalData.noBarHeight,
            footerRail: app.globalData.footerRail || false,
            searchStatus: false,
            sortList: [
                {
                    id: 1,
                    label: '匹配度',
                    key: 'jo_matching_degree',
                    value: 'asc',
                    img: 'https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/rise_icon.png',
                    inImg: 'https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/riseBlue_icon.png'
                },
                {
                    id: 2,
                    label: '匹配度',
                    key: 'jo_matching_degree',
                    value: 'desc',
                    img: 'https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/fall_icon.png',
                    inImg: 'https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/fallBlue_icon.png'
                },
                {
                    id: 3,
                    label: '投资额',
                    key: 'jo_investment',
                    value: 'asc',
                    img: 'https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/rise_icon.png',
                    inImg: 'https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/riseBlue_icon.png'
                },
                {
                    id: 4,
                    label: '投资额',
                    key: 'jo_investment',
                    value: 'desc',
                    img: 'https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/fall_icon.png',
                    inImg: 'https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/fallBlue_icon.png'
                }
            ],
            screenForm: {},
            directionData: [], // 方向数据存储
            provinceData: [], // 省份列表
            provinceId: '', // 选种的省份ID
            cityData: [], // 市列表
            cityId: '',
            areaData: [], // 区列表
            areaId: '',
            industryOneData: [], // 一级产业列表
            industryOneId: '',
            industryTwoData: [], // 二级产业列表
            industryTwoId: '',
            industryThreeData: [], // 三级产业列表
            industryTherrId: '',
            // .展开状态块
            roleStatue: false, // 地位
            sectorStatue: false, // 上市板块
            natureStatue: false, // 企业性质
            overseasStatue: false, // 对外投资
            dateStatus: false, // 成立时间
            capitalStatue: false, // 注册资本
            employeesStatue: false, // 企业人数
            incomeStatue: false, // 收入规模
            directionNoIndex: 3, // 方向第一层被选择值
            componentState: false,
            searchForm: {
                market: [], // 名称，名称
                tag: [],  // id,id
                nature: [], // id
                scale: [], // id
                crew: [], // id
                registeredcapital: [], // id
                registerdate: [], // id
                abroad: [], // id
            }
        }
    },
    methods: {
        popupChange(e) {
            const pages = getCurrentPages()
            this.componentState = e.show
            if (pages[0].route == 'pages/project/project') {
                if (e.show) {
                    this.searchForm = uni.getStorageSync('projectSearchForm') ? uni.getStorageSync('projectSearchForm') : {
                        market: [], // 名称，名称
                        tag: [],  // id,id
                        nature: [], // id
                        scale: [], // id
                        crew: [], // id
                        registeredcapital: [], // id
                        registerdate: [], // id
                        abroad: [], // id
                    }
                } else {
                    uni.setStorageSync('projectSearchForm', this.searchForm)
                }
            } else {
                if (e.show) {
                    this.searchForm = uni.getStorageSync('companySearchForm') ? uni.getStorageSync('companySearchForm') : {
                        market: [], // 名称，名称
                        tag: [],  // id,id
                        nature: [], // id
                        scale: [], // id
                        crew: [], // id
                        registeredcapital: [], // id
                        registerdate: [], // id
                        abroad: [], // id
                    }
                } else {
                    uni.setStorageSync('companySearchForm', this.searchForm)
                }
            }

        },
        // 筛选触发
        onScreen(key, item) {
            if (this.searchForm[`${key}`].filter(res => res.id == item.id).length > 0) {
                const index = this.searchForm[`${key}`].findIndex(res => res.id == item.id)
                this.searchForm[`${key}`].splice(index, 1)
            } else {
                this.searchForm[`${key}`].push(item)
            }
        },
        onSort(item) {
            // TODO
            this.$emit('sortChange', item)
            this.$refs.sortRef.close()
        },
        onResetting() {
            this.searchForm = {
                market: [], // 名称，名称
                tag: [],  // id,id
                nature: [], // id
                scale: [], // id
                crew: [], // id
                registeredcapital: [], // id
                registerdate: [], // id
                abroad: [], // id
            }
            this.$emit('otherChange', this.searchForm)
            this.$refs.sortRef.close()
        },
        onConfirm() {
            this.$emit('otherChange', this.searchForm)
            this.$refs.sortRef.close()
        },
        confirmFather(item) {
            if (this.screenIndex == 2) { // 方向
                this.$emit('industryChange',  item)
                this.$refs.sortRef.close()
            } else if (this.screenIndex == 3) { // 地区
                this.$emit('provinceChange',  item)
                this.$refs.sortRef.close()
            }
        },
        onSelect(e, key) {
            if (this.screenIndex == 2) { // 方向
                this[`${key}Id`] = e.id
                const params = {
                    id: e.id
                }
                xzguild(params).then(res => {
                    if (key == 'industryOne' && res.data.length > 0) {
                        this.industryTwoData = []
                        this.industryThreeData = []
                        this.industryTwoData = res.data
                    } else if (key == 'industryTwo' && res.data.length > 0) {
                        this.industryThreeData = []
                        this.industryThreeData = res.data
                    } else if (key == 'industryThree' && res.data.length > 0) {
                        this.$emit('industryChange', e)
                        this.$refs.sortRef.close()
                    } else {
                        this.$emit('industryChange', e)
                        this.$refs.sortRef.close()
                    }
                })
            } else if (this.screenIndex == 3) { // 地区
                this[`${key}Id`] = e.id
                const params = {
                    uid: uni.getStorageSync('uid'),
                    id: e.id
                }
                mobregion(params).then(res => {
                    if (key == 'province' && res.data.length > 0) {
                        this.cityData = []
                        this.areaData = []
                        this.cityData = res.data
                    } else if (key == 'city' && res.data.length > 0) {
                        this.areaData = []
                        this.areaData = res.data
                    } else if (key == 'area' && res.data.length > 0) {
                        this.$emit('provinceChange', e)
                        this.$refs.sortRef.close()
                    } else {

                        this.$emit('provinceChange', e)
                        this.$refs.sortRef.close()
                    }
                })
            }
        },
        navSearch() {
            uni.navigateTo({
                url: '../../subpages/pages/search/search'
            })
        },
        // 切换展示状态
        checkStatue(statue) {
            this[statue] = !this[statue]
        },
        checkChange(item) {
            this.$refs.sortRef.open()
            if (this.screenIndex != item.id) {
                this.$emit('checkChange', item.id)
                if (item.id == 2) {
                    xzguild().then(res => {
                        console.log(res, 'res---')
                        this.industryOneData = res.data
                    })
                } else if (item.id == 3) {
                    const params = {
                        uid: uni.getStorageSync('uid'),
                    }
                    mobregion(params).then(res => {
                        this.provinceData = res.data
                    })
                } else if (item.id == 4) {
                    sxText().then(res => {
                        this.screenForm = res.data
                    })
                }
            }
        },
        sortComputed(item) {
            return false
        }
    }
})
</script>

<style scoped lang="scss">
.content {
    width: 100%;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    padding-left: 20rpx;
    box-sizing: border-box;
    z-index: 999;
    position: relative;
}
.icon {
    margin-left: 6rpx;
    width: 15rpx;
    height: 7rpx;
}
.inTitle {
    color: #5162FD;
    border-bottom: 1rpx solid #5162FD;
    height: 100%;
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    line-height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.title {
    color: #656667;
    height: 100%;
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    line-height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search {
    width: 80rpx;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 999;
}
.popup_view {
    width: 100%;
    height: auto;
    background: white;
}
.sort_content {
    width: 100%;
    border-top: 2rpx solid #e7e7e7;
    box-sizing: border-box;
    padding: 30rpx;
}
.sort_row {
    width: 100%;
    height: 88rpx;
    display: flex;
    align-items: center;
}
.sort_title {
    height: 88rpx;
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    line-height: 88rpx;
    margin-right: 6rpx;
}
.table_main {
    border-top: 1rpx solid #e2e2e2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .list_one {
        height: 100%;
        width: 33%;
        overflow-y: auto;
        background: #f1f1f1;
        .list_row_one {
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #494949;
            text-align: center;
        }
        .inList_row_one {
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #5162FD;
            background: #fafafa;
            text-align: center;
        }
    }
    .list_two {
        width: 33%;
        height: 100%;
        overflow-y: auto;
        background: #fafafa;
        .list_row_two {
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #494949;
            text-align: center;
        }
        .inList_row_two {
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            font-size: 28rpx;
            background: white;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #5162FD;
            text-align: center;
        }
    }
    .list_three {
        height: 100%;
        width: 34%;
        overflow-y: auto;
        flex: 1;
        background: #ffffff;
        .list_row_three {
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #494949;
            text-align: center;
        }
        .inList_row_three {
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #5162FD;
            text-align: center;
        }
    }
}


.other_content {
    border-top: 2rpx solid #ebebeb;
    width: 100%;
    overflow-y: auto;
    padding: 0 10rpx;
    box-sizing: border-box;
}
.other_tool {
    width: 100%;
    height: 110rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    padding-bottom: 20rpx;
    left: 0;
    background: white;
}
.tool_cancel {
    width: 45%;
    height: 80%;
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #5162FD;
    line-height: 40rpx;
    border: 2rpx solid #5162FD;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 60rpx 0 0 60rpx;
}
.tool_confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45%;
    height: 80%;
    color: white;
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    line-height: 40rpx;
    background-image: linear-gradient(0, #5162FD, #8E4EF7);
    border-radius: 0 60rpx 60rpx 0;
}
.other_black {
    width: 100%;
    margin-top: 30rpx;
    padding: 10rpx 10rpx 120rpx;
    box-sizing: border-box;
}
.other_header {
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10rpx;
    box-sizing: border-box;
}
.header_name {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #494949;
    line-height: 40rpx;
}
.header_icon {
    height: 33rpx;
    font-size: 24rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #9B9B9B;
    line-height: 33rpx;
}
.other_main {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: hidden;
}
.inOther_li {
    width: 220rpx;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    border-radius: 35rpx;
    background: #EAECFF;
    font-size: 24rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #5162FD;
    border: 2rpx solid #5162FD;
    margin: 10rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
}
.other_li {
    width: 220rpx;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    border-radius: 35rpx;
    background: #F5F6F7;
    font-size: 24rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #494949;
    margin: 10rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
